<template>
  <div class="songlist">
    <div class="warpper">
      <div id="list0" @click="indexClick" :class="listIndex == 'list0'? 'textBold' : ''">创建歌单</div>
      <div id="list1" @click="indexClick" :class="listIndex == 'list1'? 'textBold' : ''">收藏歌单</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listIndex:String

    };
  },

  methods: {
    indexClick(e) {
      this.listIndex = e.target.id
    },
  },
};
</script>

<style leng="less" scoped>
.songlist {
  width: 100%;
  height: 1.43rem;
}
.textBold {
  font-weight: bold;
  color:#fe3b37;
}
.warpper {
  width: 6.85rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-weight: 600;
  color: #626262;
  font-size: 0.33rem;
}
#createsong::after {
  content: "|";
  position: relative;
  left: 1rem;
  font-weight: 100;
}
#createsong::after {
  content: " ";
  display: block;
  width: 1.9rem;
  height: 0.2rem;
  background: red;
  overflow: hidden;
  position: absolute;
  border-radius: 0.5rem;
  display: none;
  transition: 1s;
}

</style>